{@ Context::addJsFile("./common/js/jquery.js", true, '', -100000) }
{@ Context::addJsFile("./common/js/js_app.js", true, '', -100000) }
{@ Context::addJsFile("./common/js/x.js", true, '', -100000) }
{@ Context::addJsFile("./common/js/common.js", true, '', -100000) }
{@ Context::addJsFile("./common/js/xml_handler.js", true, '', -100000) }
{@ Context::addJsFile("./common/js/xml_js_filter.js", true, '', -100000) }

<!--%import("css/layout.css")-->
<!--%import("css/mx.css")--><!--//mobile XE CSS-->
<!--%import("js/jquery-1.5.2.min.js")-->
<!--%import("js/layout.js")-->
<script type="text/javascript" src="./js/iscroll.js?v3.7.1"></script> 


<script type="text/javascript"> 
	var android_flag=0;
	var doHeight;
	var divHeight;
	var scrTop;
	var apple_padding=0;
	var scroll_flag=1;
	if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)){
		apple_padding=60;
		// 아이폰일때는 iscroll사용
		var myScroll;
		var a = 0;
		function loaded() {
			setHeight();	// Set the wrapper height. Not strictly needed, see setHeight() function below.
		 
			// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
			myScroll = new iScroll('scroller', {desktopCompatibility:false});
		}
		 
		// Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques.
		function setHeight() {
			var footerH = $('#footer').height()
			var headerCartH = $('#header_cart').height() + 80;
			
			var wrapperH = window.innerHeight - footerH + 130;
			
			$('#wrapper').height(wrapperH-60);
			$('#wrapper_cart').height(wrapperH - headerCartH);
			$('#footer').css("bottom","60px");
		}
		 
		// Check screen size on orientation change
		window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
		 
		// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
		// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		//$("#yamNyamMobileMain").live('touchmove', function (e) { e.preventDefault(); }, false); 
		//$("#footer").live('touchmove', function (e) { e.preventDefault(); }, false);
		 
		// Load iScroll when DOM content is ready.
		document.addEventListener('DOMContentLoaded', loaded, false);
	}else{
		window.addEventListener('touchmove',function(){
			$('#footer').css("opacity","0");
			}, false);
		
		window.addEventListener('touchend',function(){
			$('#footer').css("opacity","1");
			}, false);
		//////////////////
		// 안드로이드일때,,
		android_flag=1;
		$("#footer").css("top", $(window).height() - 70 + apple_padding);
		
		$(window).scroll(function() {
			if(scroll_flag){

			doHeight = $(document).height();
			divHeight = $("#footer").css("height");
			divHeight = parseInt(divHeight.substring(0, divHeight.length-2));
			
			scrTop = $(window).scrollTop();
		
			$("#footer").css("top", scrTop + $(window).height() - 70 + apple_padding);
			}
		});
	}

</script> 

<div data-role="page" id="yamNyamMobileMain" style="background-color:white;">

	<div id="wrapper">
		<div id="scroller">
            <div id="mainBody">
                <div id="divLogo"> 
                    <a href="."><img src="./images/logo.png" width="103" height="28"></a>
                    <!--@if(!$is_logged)-->
                    <div class="bt" onClick="location.href='{getUrl('act','dispMemberLoginForm')}';">로그인</div>
                    <!--@else-->
                    <div class="bt" onClick="location.href='{getUrl('act','dispMemberLogout')}';">로그아웃</div>
                    <!--@endif-->
                    <div class="bt" onClick="location.href='{getUrl('m','0')}';">PC버젼</div>
                </div>
                <div id="divMenu">
                    <div class="menuIcon">
                        <a onclick="alert('준비중입니다.'); return false;">
                            <img src="./images/menu1.png" width="54" height="54" /><br />
                            주문마법사
                        </a>
                    </div>
                    <div class="menuIcon">
                        <a href="./food_list">
                            <img src="./images/menu2.png" width="54" height="54" /><br />
                            음식리스트
                        </a>
                    </div>
                    <div class="menuIcon">
                        <a href="./restaurant_list">
                            <img src="./images/menu3.png" width="54" height="54" /><br />
                            상점리스트
                        </a>
                    </div>
                    <div class="menuIcon">
                        <a href="./today_menu_list">
                            <img src="./images/menu4.png" width="54" height="54" /><br />
                            오늘의식단
                        </a>
                    </div>
                    <div class="menuIcon">
                        <a href="./mypage">
                            <img src="./images/menu5.png" width="54" height="54" /><br />
                            주문내역
                        </a>
                    </div>
                </div>
                <!--@if($act != "dispMemberLoginForm")-->
                <div id="divTitle">
                    <!--@if($mid == "food_list")-->
                    <div id="divMenuCursor" style="margin-left:85px;"></div>
                    음식리스트
                    <!--@elseif($mid == "restaurant_list")-->
                    <div id="divMenuCursor" style="margin-left:145px;"></div>				
                    상점리스트
                    <!--@elseif($mid == "today_menu_list")-->
                    <div id="divMenuCursor" style="margin-left:205px;"></div>				
                    오늘의식단
                    <!--@elseif($mid == "mypage")-->
                    <div id="divMenuCursor" style="margin-left:265px;"></div>								
                    주문내역
                    <!--@elseif($mid == "order_list")-->
                    주문하기
                    <!--@endif-->
                </div>
                <!--@endif-->
                <div id="yamNyamMobileContent">
                <!--@if($act != "dispMemberLoginForm" && $document_srl == "")-->
                    <!--@if($mid == "food_list" || $mid == "restaurant_list")-->
                        <!--#include("./category.html")-->
                    <!--@endif-->
                <!--@endif-->
                {$content}
                </div>
			</div>
		</div>
	</div>
</div>

<div id="divCartWrap" style="display: none;">
    <div id="header_cart" style="z-index:999;">
        <div id="divLogo" style="height:20px;font-size:12px;">
        주문서
        <span style="float:right">▼</span>
        </div>
        <div id="divCartSub">
        <img src="./images/bullet_icon.png" width="16" height="15" style="vertical-align:middle"> 현재까지 선택하신 음식 목록입니다.
        </div>
    </div>
    <div id="wrapper_cart">
        <div id="scroller_cart">
            <div id="divCart">
            
            </div>
        </div>
	</div>
</div>


<!--@if($act == "dispOrderConfirmMobile" || $act == "dispMemberLoginForm")-->
<div id="footer" style="height:0; display:none;"></div>
<!--@else-->
<!--#include("./cart.html")-->
<!--@endif-->